<template>
  <!-- 合同配置 -->
  <div class="box">
    <el-card
      shadow="never"
      header="默认值设置"
      class="item-background"
      style="width: 100%"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="configForm"
        label-width="auto"
        label-position="right"
      >
        <el-form-item label="乙方名称" prop="partyBName">
          <el-input
            v-model="form.partyBName"
            clearable
            placeholder="请输入乙方名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="法人" prop="legalRepresentName">
          <el-input
            v-model="form.legalRepresentName"
            clearable
            placeholder="请输入法人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="firstcontacter">
          <el-input
            v-model="form.firstcontacter"
            clearable
            placeholder="请输入联系人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            v-model="form.telephone"
            clearable
            placeholder="请输入乙方电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="传真">
          <el-input
            v-model="form.fax"
            clearable
            placeholder="请输入乙方传真"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="form.address"
            clearable
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="签订地点">
          <el-input
            v-model="form.signedAddress"
            clearable
            placeholder="请输入签订地点"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称缩写" prop="codeLetter">
          <el-input
            v-model="form.codeLetter"
            clearable
            placeholder="请输入编辑缩写（如:TL）"
          ></el-input>
        </el-form-item>
        <el-form-item label="收款人" prop="payeeAdminId">
          <el-select
            v-model="form.payeeAdminId"
            placeholder="请选择"
            style="width: 100%"
            clearable
            filterable
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生产负责人" prop="produceAdminId">
          <el-select
            v-model="form.produceAdminId"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="送货负责人" prop="deliverAdminId">
          <el-select
            v-model="form.deliverAdminId"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开户行" prop="bankAddress">
          <el-input
            v-model="form.bankAddress"
            clearable
            placeholder="请输入开户行名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="银行账号" prop="bankNum">
          <el-input
            v-model="form.bankNum"
            clearable
            placeholder="请输入银行账号"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button type="primary" @click="save" :loading="isSaveing"
          >保 存</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isSaveing: false,
      //表单数据
      form: {
        partyBName: '',//乙方名称
        legalRepresentName: '',//法人
        firstcontacter: '',//联系人
        telephone: '',
        fax: '',
        address: '',
        signedAddress: '',//签订地点
        codeLetter: '',//乙方首字母 生成编号使用
        payeeAdminId: null,//默认收款人
        produceAdminId: null,//默认生产负责人
        deliverAdminId: null,//	默认送货负责人
        bankNum: '',//银行账号
        bankAddress: '',//开户行
      },
      userList: [],
      rules: {
        partyBName: [
          { required: true, message: '请输入乙方名称' }
        ],
        legalRepresentName: [
          { required: true, message: '请输入法人姓名' }
        ],
        firstcontacter: [
          { required: true, message: '请输入联系人' }
        ],
        codeLetter: [
          { required: true, message: '请输入名称缩写' }
        ],
        payeeAdminId: [
          { required: true, message: '请选择默认收款人', trigger: 'change' }
        ],
        produceAdminId: [
          { required: true, message: '请选择默认生产负责人', trigger: 'change' }
        ],
        deliverAdminId: [
          { required: true, message: '请选择默认送货负责人', trigger: 'change' }
        ],
        bankAddress: [
          { required: true, message: '请输入开户行名称' }
        ],
        bankNum: [
          { required: true, message: '请输入银行账号' }
        ],
      }
    }
  },
  mounted () {
    this.getDetail()
    this.getUserList()
  },
  methods: {
    async getDetail () {
      let res = await this.$API.contract.contractConfig.getConfigDetail.post({ id: 1 })
      this.form = res.data
    },

    // 获取所有用户列表
    async getUserList (val) {
      let data = {
        limit: 1000,
        page: 1,
        search: val
      }
      let res = await this.$API.user.getUserList.get(data)
      this.userList = res.data
    },
    // 搜索用户
    queryUser (val) {
      this.getUserList(val)
    },
    //表单提交方法
    save () {
      this.$refs.configForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          let res = await this.$API.contract.contractConfig.updateConfig.post(this.form)
          this.isSaveing = false
          if (res.code == 200) {
            this.$message.success("操作成功")
          }
        }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 15px;
}
.button {
  margin-top: 50px;
  padding-left: 80px;
}
</style>